<template>
  <nut-navbar title="订单中心" left-show @click-back="router.back" />
  <nut-tabs v-model="currentTab" @change="handleTab">
    <nut-tab-pane
      v-for="(item, index) in tabs"
      :key="index"
      :title="item.title"
      :pane-key="item.value"
    >
      <OrderItemView v-for="(item, index) in store.orderList" :key="item.id" :data="item" />
    </nut-tab-pane>
  </nut-tabs>
  <section class="hasMainbar">
    <nut-pagination
        v-if="store.pageInfo.total > store.pageInfo.limit"
        v-model="store.pageInfo.page"
        :total-items="store.pageInfo.total"
        :items-per-page="store.pageInfo.limit"
        @change="store.changePage"
    />
  </section>
  <MainBar :active="3" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useOrderStore } from '@/stores/order'
import type { OrderStatusTabItem } from '@/config/types'
import OrderItemView from '@/components/order/index.vue'
import MainBar from '@/components/mainbar/index.vue'

const store = useOrderStore()
const router = useRouter()
onMounted(() => store.searchList())

const currentTab = ref<number>(1)
const tabs = ref<OrderStatusTabItem[]>([
  { title: '待支付', value: 1 },
  { title: '已完成', value: 2 },
  { title: '已取消', value: 0 },
  { title: '全部', value: -1 }
])

const handleTab = ({ title, paneKey, disabled }) => {
  store.changeTab(paneKey)
}
</script>
